<template>
	<view :style="viewColor">
		<view class="release_content">
			<view v-if="userInfo.apply_status != 2" class="approval_status">
				<view class="status_count" :class="followDetail.apply_status == 0 ? 'status1' : 'status0'">
					<view class="status_title">
						<text class="iconfont"
							:class="(followDetail.apply_status == -1 ) ? 'icon-tishi' : 'icon-shijian'"></text>
						<text v-if="userInfo.apply_status == -1" class="title">审核未通过</text>
						<text v-if="userInfo.apply_status == 1" class="title">正在审核</text>
					</view>
					<view v-if="userInfo.apply_status == -1" class="status_info">
						{{userInfo.refuse_text}}
					</view>
					<view v-if="userInfo.apply_status == 0 " class="status_info">
						补充个人信息需通过审核后方可展示！
					</view>
					<view v-if="userInfo.apply_status == 1" class="status_info">
						个人信息审核通过后，将展示在首页！
					</view>
				</view>
			</view>
			<view>
				<view class="release_item">
					<view class="photo_count">
						<view class="input_photo acea-row row-middle">
							<view class="pictrue" v-for="(item, index) in formData.image" :key="index">
								<image :src="item"></image>
								<view class="close_btn" @click="DelPic(index)"><text
										class="iconfont icon-guanbi4"></text></view>
							</view>
							<view v-if="formData.image.length < 6"
								class="pictrue acea-row row-center-wrapper row-column add" @click.stop="clk">
								<view><text class='iconfont icon-icon25201'></text></view>
								<view class="text">添加图片</view>
							</view>
							<view v-if="showCd" :ratio="0" class="container">
								<bt-cropper ref="cropper" :imageSrc="imageSrc" @cropEnd="loadImage">
									<!-- 你想插入的内容 -->
									<button class="crop_btn" @click="crop">裁切</button>
								</bt-cropper>
							</view>
						</view>
					</view>
					<view class="info">
						<text class="nickname">{{userInfo.nickname}}</text>
						<div class="haibao-bott">
							<view>
								<span>
									<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
									<span>{{userInfo.phone}}</span>
								</span>
								<span></span>
							</view>
							<view>
								<div class="odiver">
									<span>
										<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
									</span>
									<span>{{userInfo.addres}}</span>
								</div>

							</view>
							<view>
								<span>
									<image :src="imgHost + '/index/ement.png'" mode=""></image>
									<span>{{userInfo.email}}</span>
								</span>

							</view>
						</div>
					</view>
				</view>
				<view class="release_item">
					<p>个人信息</p>
					<view class="cardView">
						<text class="ViewTitle">性别</text>
						<radio-group v-model="selectedValue" @change="changeSex">
							<radio style="margin-right: 50rpx;" color="var(--view-theme)" v-for="option in sexOptions" :key="option.value"
								:value="option.value" :checked="option.checked">
								{{ option.label }}
							</radio>
						</radio-group>
					</view>
					<view class="cardView">
						<text class="ViewTitle">年龄</text>
						<input class="ViewInput" type="number" maxlength="100" placeholder="请输入年龄" v-model="age">岁
					</view>
					<view class="cardView">
						<text class="ViewTitle">月收入</text>
						<input class="ViewInput" type="digit" placeholder="请输入月收入"
							v-model="ysr_text">万元
					</view>
					<view class="cardView">
						<text class="ViewTitle">身高</text>
						<input class="ViewInput" type="digit" placeholder="请输入身高" v-model="sg_text">厘米
					</view>
					<view class="cardView">
						<text class="ViewTitle">星座</text>
						<uni-data-select style="flex: 1;" v-model="constellationId" :localdata="constellationList"
							:clear="true" @change="changeConstellation"></uni-data-select>
					</view>
					<view class="cardView">
						<text class="ViewTitle">体重</text>
						<input class="ViewInput" type="digit" placeholder="请输入体重" v-model="tz_text">千克
					</view>
					<view class="cardView">
						<text class="ViewTitle">婚况</text>
						<uni-data-select style="flex: 1;" v-model="marriageId" :localdata="marriageList" :clear="true"
							@change="changeMarriage"></uni-data-select>
					</view>
					<view class="cardView">
						<text class="ViewTitle">学历</text>
						<uni-data-select style="flex: 1;" v-model="educationId" :localdata="educationList" :clear="true"
							@change="changeEducation"></uni-data-select>
					</view>
					<view class="cardView">
						<text class="ViewTitle">职业</text>
						<input class="ViewInput" type="text" placeholder="请输入职业" v-model="zy_text">
					</view>

					<view class="carditem">
						<text class="cardTitle">房车情况</text>
						<textarea class="textarea1" placeholder="请输入" v-model="fc_text"></textarea>
					</view>
					<view class="carditem">
						<text class="cardTitle">兴趣爱好</text>
						<textarea class="textarea" placeholder="请输入" v-model="xq_text"></textarea>
					</view>
					<view class="carditem">
						<text class="cardTitle">个人签名</text>
						<textarea class="textarea1" placeholder="请输入" v-model="autograph"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 200rpx;">
			<view class="saveInfo" @click="editSave">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	import Cache from '@/utils/cache'
	import {
		getUserInfo,
		editInfo,
		editAvatar
	} from '@/api/user.js';
	import {
		TOKENNAME,
		HTTP_REQUEST_URL,
	} from '@/config/app.js';
	import {
		setStorage,
		getStorage
	} from '../../../libs/uniApi.js';
	import store from '@/store';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				userInfo: {},
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				formData: {
					image: [],
					content: "",
					topic_id: "",
					spu_id: [],
				},
				imageSrc: '',
				productList: [],
				topicName: {},
				isUpload: true,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				showCd: false,
				id: "",
				order_id: "",
				imgName: "",
				autograph: '', //个人签名
				ysr_text: '', //收入,
				sg_text: '', //身高
				age: '', //年龄
				sexOptions: [{
						value: '1',
						label: '男',
						checked: false
					},
					{
						value: '2',
						label: '女',
						checked: false
					}
				],
				selectedValue: null, // 默认选中的值
				marriageId: "",
				marriageList: [{
						value: "未婚",
						text: "未婚"
					},
					{
						value: "已婚",
						text: "已婚"
					},
					{
						value: "离异",
						text: "离异"
					},
					{
						value: "丧偶",
						text: "丧偶"
					},
				],
				educationId: '', //学历id
				educationList: [{
						value: "高中",
						text: "高中"
					},
					{
						value: "大专",
						text: "大专"
					},
					{
						value: "本科",
						text: "本科"
					},
					{
						value: "硕士",
						text: "硕士"
					},
					{
						value: "博士",
						text: "博士"
					},
				],
				constellationId: '', //星座id
				constellationList: [{
						value: "白羊座",
						text: "白羊座"
					},
					{
						value: "金牛座",
						text: "金牛座"
					},
					{
						value: "双子座",
						text: "双子座"
					},
					{
						value: "巨蟹座",
						text: "巨蟹座"
					},
					{
						value: "狮子座",
						text: "狮子座"
					},
					{
						value: "处女座",
						text: "处女座"
					},
					{
						value: "天秤座",
						text: "天秤座"
					},
					{
						value: "天蝎座",
						text: "天蝎座"
					},
					{
						value: "射手座",
						text: "射手座"
					},
					{
						value: "摩羯座",
						text: "摩羯座"
					},
					{
						value: "水瓶座",
						text: "水瓶座"
					},
					{
						value: "双鱼座",
						text: "双鱼座"
					},
				],
				zy_text: '', //职业
				xq_text: '', //兴趣爱好
				fc_text: '', //房车情况
				tz_text: '', //体重

			};
		},
		computed: {
			...mapGetters({
				viewColor: 'viewColor',
				keyColor: "keyColor"
			}),
		},
		onShow() {

		},
		onLoad() {
			this.UserInfo()
		},
		// watch: {
		// 	formData: {
		// 		handler(n) {
		// 			if (!this.id) {
		// 				setTimeout(() => {
		// 					setStorage('addPlant', n);
		// 				});
		// 			}
		// 		},
		// 		deep: true
		// 	}
		// },
		methods: {
		
			//选择婚况
			changeMarriage(e) {
				console.log(this.marriageId);
			},
			//选择学历
			changeEducation(e) {
				console.log(this.educationId);
			},
			changeConstellation(e) {
				console.log(this.constellationId);
			},
			//修改性别
			changeSex(value) {
				console.log("选择的性别是: ", value.detail.value);
				let sex = parseInt(value.detail.value)
				editAvatar({
					sex: sex
				}).then(res => {
					console.log(res);
				})
			},
			//获取信息
			UserInfo() {
				getUserInfo().then((res) => {
					this.userInfo = res.data
					console.log(this.userInfo);
					this.age = res.data.age
					this.ysr_text = res.data.ysr_text
					this.sg_text = res.data.sg_text
					this.autograph = res.data.autograph
					this.formData.image = JSON.parse(res.data.poster)
					this.educationId = res.data.xl_text
					this.marriageId = res.data.hk_text
					this.constellationId = res.data.xz_text
					this.fc_text = res.data.fc_text
					this.xq_text = res.data.xq_text
					this.zy_text = res.data.zy_text
					this.tz_text = res.data.tz_text
					let sex = res.data.sex
					if (sex == 1) {
						this.sexOptions[0].checked = true
						this.sexOptions[1].checked = false
					} else if (sex == 2) {
						this.sexOptions[0].checked = false
						this.sexOptions[1].checked = true
					} else {
						this.sexOptions[0].checked = false
						this.sexOptions[1].checked = false
					}
				})
			},
			editSave() {
				editInfo({
					autograph: this.autograph,
					age: this.age,
					poster: JSON.stringify(this.formData.image),
					sg_text: this.sg_text,
					ysr_text: this.ysr_text,
					xz_text: this.constellationId,
					tz_text: this.tz_text,
					hk_text: this.marriageId,
					xl_text: this.educationId,
					zy_text: this.zy_text,
					xq_text: this.xq_text,
					fc_text: this.fc_text
				}).then(res => {
					return this.$util.Tips({
						title: '保存成功！',
						icon: 'success'
					}, {
						tab: 5,
						url: '/pages/contactsCircle/index'
					});
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},
			//选择图片
			clk() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: (res) => {
						let tempFilePaths = res.tempFilePaths[0]
						that.imageSrc = tempFilePaths
						that.showCd = true
					}
				})
			},
			crop() {
				// 通过组件定义的ref调用cropper方法，返回一个promise对象
				this.$refs.cropper.crop().then(([err, res]) => {
					if (!err) {
						this.doUpload(res.tempFilePath)
					} else {
						console.log(err)
					}
				})
			},
			loadImage() {
				this.showCd = false
			},
			doUpload(rsp) {
				let that = this
				uni.compressImage({
					src:rsp,
					quality:50,
					success(res) {
						console.log(res);
						let imgpath = res.tempFilePath
						uni.uploadFile({
							url: HTTP_REQUEST_URL + '/api/upload/image/field',
							filePath: imgpath,
							name: 'field',
							formData: {
								'filename': imgpath,
								'name': that.imgName
							},
							header: {
								// #ifdef MP
								"Content-Type": "multipart/form-data",
								// #endif
								[TOKENNAME]: 'Bearer ' + store.state.app.token
							},
							success: (uploadFileRes) => {
								let imgData = JSON.parse(uploadFileRes.data)
								if (imgData.data) that.formData.image.push(imgData.data.path)
							},
							complete(res) {
								let data = JSON.parse(res.data)
								that.$util.Tips({
									title: data.message
								});
						
							}
						});
					},
					fail(err) {
						uni.uploadFile({
							url: HTTP_REQUEST_URL + '/api/upload/image/field',
							filePath: rsp,
							name: 'field',
							formData: {
								'filename': rsp,
								'name': that.imgName
							},
							header: {
								// #ifdef MP
								"Content-Type": "multipart/form-data",
								// #endif
								[TOKENNAME]: 'Bearer ' + store.state.app.token
							},
							success: (uploadFileRes) => {
								let imgData = JSON.parse(uploadFileRes.data)
								if (imgData.data) that.formData.image.push(imgData.data.path)
							},
							complete(res) {
								let data = JSON.parse(res.data)
								that.$util.Tips({
									title: data.message
								});
						
							}
						});
					}
					
				})
				// uni.uploadFile({
				// 	url: HTTP_REQUEST_URL + '/api/upload/image/field',
				// 	filePath: rsp,
				// 	name: 'field',
				// 	formData: {
				// 		'filename': rsp,
				// 		'name': that.imgName
				// 	},
				// 	header: {
				// 		// #ifdef MP
				// 		"Content-Type": "multipart/form-data",
				// 		// #endif
				// 		[TOKENNAME]: 'Bearer ' + store.state.app.token
				// 	},
				// 	success: (uploadFileRes) => {
				// 		let imgData = JSON.parse(uploadFileRes.data)
				// 		if (imgData.data) that.formData.image.push(imgData.data.path)
				// 	},
				// 	complete(res) {
				// 		let data = JSON.parse(res.data)
				// 		that.$util.Tips({
				// 			title: data.message
				// 		});

				// 	}
				// });
			},
			getImgName(name) {
				this.imgName = name
			},
			/**删除图片*/
			DelPic: function(index) {
				let that = this
				that.formData.image.splice(index, 1);
			},

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background: #F5F5F5;
	}

	.crop_btn {
		line-height: 90rpx;
	}

	.container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		width: 750rpx;
		height: 100vh;
	}

	.release_content {
		padding: 0 20rpx;

		.approval_status {
			padding: 20rpx;

			.status_count {
				padding: 26rpx 30rpx 20rpx;
				border-radius: 10rpx;

				.title {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				&.status0 {
					background: #FDF3F2;

					.title {
						color: #E93323;
					}
				}

				&.status1 {
					background: #FFF4EB;

					.title {
						color: #FC8327;
					}
				}

				.iconfont {
					font-size: 30rpx;
				}

				.icon-shijian {
					color: #FC8327;
				}

				.icon-tishi {
					color: #E93323;
				}

				.status_info {
					font-size: 22rpx;
					color: #666666;
					margin: 10rpx 0 0 36rpx;
				}
			}
		}

		.release_item {
			background: #ffffff;
			padding: 30rpx 30rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}

		.photo_count {
			padding: 30rpx 0;
		}

		.info {
			.nickname {
				font-size: 48rpx;
				font-weight: 600;
			}

			.haibao-bott {
				margin-top: 25rpx;
				padding-top: 0rpx;
				margin-bottom: 25rpx;

				view {
					display: flex;
					justify-content: space-between;

					span {
						margin: right;
						margin-top: 10rpx;

						image {
							flex: 1;
							width: 16rpx;
							height: 24rpx;
							vertical-align: middle;
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}

					// align-items: center;
					.odiver {
						span {
							margin: right;
							margin-top: 10rpx;

							image {
								flex: 1;
								width: 16rpx;
								height: 24rpx;
								vertical-align: middle;
							}

							span {
								font-weight: 600;
								font-size: 24rpx;
								line-height: 44rpx;
								color: #595959;
								vertical-align: middle;
								margin-left: 14rpx;
							}
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

				}

				&>view:nth-of-type(3) {
					&>span:nth-of-type(1) {
						image {
							width: 24rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
	}

	.input_photo .pictrue,
	.input_photo .uni-image,
	.input_photo image {
		width: 210rpx;
		height: 210rpx;
		border-radius: 8rpx;
		margin-right: 11rpx;
		position: relative;

		&:nth-child(3n) {
			margin-right: 0;
		}

		.close_btn {
			width: 40rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, .6);
			border-radius: 0 8rpx 0 8rpx;
			position: absolute;
			top: 0;
			right: 0;
			text-align: center;

			.iconfont {
				color: #fff;
				font-size: 16rpx;
			}
		}

	}

	.input_photo .pictrue {
		margin-bottom: 20rpx;
	}

	.input_photo .add {
		border: 1rpx solid #DDDDDD;
		color: #BBBBBB;

		.iconfont {
			font-size: 50rpx;
		}

		.text {
			margin-top: 20rpx;
			font-size: 27rpx;
		}
	}



	.release_item {


		p {
			font-size: 22rpx;
			margin-bottom: 20rpx;
		}

		.carditem {
			display: flex;
			flex-direction: column;

			.cardTitle {
				font-size: 28rpx;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
			}

			.textarea {
				width: 94%;
				height: 150rpx;
				border: 1rpx solid #eee;
				padding: 20rpx;
			}

			.textarea1 {
				width: 94%;
				height: 150rpx;
				border: 1rpx solid #eee;
				padding: 20rpx;
				background-color: #fcfcfc;
			}
		}

		.cardView {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			.ViewTitle {
				font-size: 28rpx;
				width: 30%;
			}

			/deep/ .uni-select {
				padding: 0 !important;
				border: none !important;
			}

			/deep/ .uni-select__input-placeholder {
				font-size: 28rpx !important;
				color: #878787 !important;
			}

			.ViewInput {
				flex: 1;
			}

		}
	}

	.saveInfo {
		background: var(--view-theme);
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		margin: 100rpx 150rpx;
		border-radius: 16rpx;
		color: #fff;
		box-shadow: 1rpx 1rpx 15rpx #595959;
	}

	.dimp {
		// background-color: #fff;
		width: 100%;
		margin-top: 20rpx;
		padding: 40rpx 0rpx;
		padding-bottom: 200rpx;

		view {
			margin: auto;
			width: 432rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--view-theme);
			box-shadow: 0 12rpx 36rpx rgba(193, 0, 0, 0.1);
			font-weight: 600;
			font-size: 34rpx;
			line-height: 44rpx;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
		}
	}
</style>